<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_Promise-Promise的then的方法</title>
  <!-- 
  在 JavaScript 中， `Promise`  的  `then`  方法是处理异步操作结果的关键方法。它允许你在  `Promise`  被解决（fulfilled）或拒绝（rejected）时指定相应的回调函数。以下是关于  `Promise`  的  `then`  方法的总结和说明：
    
    1. 基本用法
    `then`  方法接受两个参数：
    - **onFulfilled**：当  `Promise`  被解决时调用的回调函数。
    - **onRejected**：当  `Promise`  被拒绝时调用的回调函数（可选）。
    const myPromise = new Promise((resolve, reject) => {
        // 异步操作
        const success = true; // 模拟操作结果
        if (success) {
            resolve("Operation succeeded!");
        } else {
            reject("Operation failed!");
        }
    });
    // 使用 then 方法处理异步操作结果
    myPromise.then(
        (result) => {
            console.log(result); // 输出: Operation succeeded!
        },
        (error) => {
            console.log(error);
        }
    );  
    2. 链式调用
    `then`  方法返回一个新的  `Promise` ，因此可以实现链式调用。每个  `then`  返回的  `Promise`  都可以有自己的  `onFulfilled`  和  `onRejected`  回调。
    myPromise
        .then((result) => {
            console.log(result); // 输出: Operation succeeded!
            return "Next operation"; // 返回值将被传递到下一个 then
        })
        .then((nextResult) => {
            console.log(nextResult); // 输出: Next operation
        });
    3. 错误处理
    如果在  `onFulfilled`  回调中抛出错误，或者返回的  `Promise`  被拒绝，后续的  `then`  中的  `onRejected`  回调将会被调用。
    myPromise
        .then((result) => {
            console.log(result); // 输出: Operation succeeded!
            throw new Error("Error in the first then"); // 抛出错误
        })
        .then(
            (nextResult) => {
                console.log(nextResult);
            },
            (error) => {
                console.log(error.message); // 输出: Error in the first then
            }
        );
    4. 捕获错误
    为了更好地处理错误，可以使用  `catch`  方法，它是  `then`  方法的简写形式，专门用于处理拒绝的情况。
    myPromise
        .then((result) => {
            console.log(result); // 输出: Operation succeeded!
            return Promise.reject("Error occurred!"); // 返回一个拒绝的 Promise
        })
        .catch((error) => {
            console.log(error); // 输出: Error occurred!
        });
    5. 总结
    `Promise`  的  `then`  方法是处理异步操作结果的重要工具。通过指定  `onFulfilled`  和  `onRejected`  回调函数，可以灵活地处理成功和失败的情况。链式调用和错误处理机制使得  `Promise`  在处理复杂的异步逻辑时更加简洁和易于维护。理解  `then`  方法的用法对于掌握 JavaScript 中的异步编程非常重要。
  -->
</head>
<body>

  <script>
    // 创建一个 Promise 实例
    const myPromise = new Promise((resolve, reject) => {
      // 模拟异步操作
      setTimeout(() => {
        const success = true; // 假设操作成功
        if (success) {
          resolve("Operation succeeded!"); // 操作成功，调用 resolve
        } else {
          reject("Operation failed!"); // 操作失败，调用 reject
        }
      }, 1000);
    });

    // 1.then参数的传递方法: 可以传递两个参数
    // 这种写法也是可以的
    // myPromise.then(res => {
    //   console.log("成功回调~", res)
    // }, err => {
    //   console.log("失败回调~", err)
    // })

    // 使用 then 方法处理 Promise 的结果
    myPromise
      .then((result) => {
        console.log(result); // 输出: Operation succeeded!
        return Promise.reject("Error occurred!"); // 返回一个拒绝的 Promise
      })
      .catch((error) => {
        console.log(error); // 输出: Error occurred!
    })

    // 2.链式调用
    const p = new Promise((resolve, reject) => {
      resolve(1)
    })

    p.then(res => {
      console.log(res)
    }).then(res => {
      console.log(res)
    }).then(res => {
      console.log(res)
    })

  </script>
  
</body>
</html>